<template>
  <div class="customer-form">
    <el-page-header @back="goBack" :title="customerId ? '编辑客户' : '新增客户'">
      <template #content>
        <span class="page-header-content">{{ customerId ? customerInfo.name : '新增客户' }}</span>
      </template>
    </el-page-header>

    <div class="form-content">
      <el-form 
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="120px"
        class="detail-form"
      >
        <!-- 基本信息 -->
        <el-card class="form-card">
          <template #header>
            <div class="card-header">
              <h3>基本信息</h3>
            </div>
          </template>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="客户姓名" prop="name">
                <el-input v-model="form.name" placeholder="请输入客户姓名" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="客户类型" prop="type">
                <el-select v-model="form.type" placeholder="请选择客户类型" style="width: 100%">
                  <el-option label="个人" value="personal" />
                  <el-option label="企业" value="enterprise" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="证件类型" prop="idType">
                <el-select v-model="form.idType" placeholder="请选择证件类型" style="width: 100%">
                  <el-option label="身份证" value="ID_CARD" />
                  <el-option label="护照" value="PASSPORT" />
                  <el-option label="营业执照" value="BUSINESS_LICENSE" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="证件号码" prop="idNumber">
                <el-input v-model="form.idNumber" placeholder="请输入证件号码" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="手机号码" prop="phone">
                <el-input v-model="form.phone" placeholder="请输入手机号码" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电子邮箱" prop="email">
                <el-input v-model="form.email" placeholder="请输入电子邮箱" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="联系地址" prop="address">
            <el-input v-model="form.address" placeholder="请输入联系地址" />
          </el-form-item>
        </el-card>

        <!-- 扩展信息 -->
        <el-card class="form-card">
          <template #header>
            <div class="card-header">
              <h3>扩展信息</h3>
            </div>
          </template>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="信用等级" prop="creditRating">
                <el-select v-model="form.creditRating" placeholder="请选择信用等级" style="width: 100%">
                  <el-option label="优秀" value="A" />
                  <el-option label="良好" value="B" />
                  <el-option label="一般" value="C" />
                  <el-option label="较差" value="D" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="客户来源" prop="source">
                <el-select v-model="form.source" placeholder="请选择客户来源" style="width: 100%">
                  <el-option label="主动申请" value="self" />
                  <el-option label="客户推荐" value="referral" />
                  <el-option label="营销活动" value="marketing" />
                  <el-option label="合作渠道" value="partner" />
                  <el-option label="其他" value="other" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="职业" prop="occupation">
                <el-input v-model="form.occupation" placeholder="请输入职业" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="月收入" prop="monthlyIncome">
                <el-input-number 
                  v-model="form.monthlyIncome" 
                  :min="0" 
                  :step="1000"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="备注" prop="remark">
            <el-input
              type="textarea"
              v-model="form.remark"
              :rows="3"
              placeholder="请输入备注信息"
            />
          </el-form-item>
        </el-card>

        <!-- 按钮组 -->
        <div class="form-buttons">
          <el-button @click="goBack">取消</el-button>
          <el-button type="primary" @click="handleSubmit">保存</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

export default {
  name: 'CustomerForm',
  setup() {
    const route = useRoute()
    const router = useRouter()
    const customerId = route.params.id
    const formRef = ref(null)

    // 表单数据
    const form = reactive({
      name: '',
      type: 'personal',
      idType: 'ID_CARD',
      idNumber: '',
      phone: '',
      email: '',
      address: '',
      creditRating: 'A',
      source: '',
      occupation: '',
      monthlyIncome: 0,
      remark: ''
    })

    // 表单验证规则
    const rules = {
      name: [
        { required: true, message: '请输入客户姓名', trigger: 'blur' },
        { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
      ],
      type: [
        { required: true, message: '请选择客户类型', trigger: 'change' }
      ],
      idType: [
        { required: true, message: '请选择证件类型', trigger: 'change' }
      ],
      idNumber: [
        { required: true, message: '请输入证件号码', trigger: 'blur' },
        { 
          pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
          message: '请输入正确的身份证号码',
          trigger: 'blur'
        }
      ],
      phone: [
        { required: true, message: '请输入手机号码', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
      ],
      email: [
        { required: true, message: '请输入电子邮箱', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
      ],
      address: [
        { required: true, message: '请输入联系地址', trigger: 'blur' }
      ],
      creditRating: [
        { required: true, message: '请选择信用等级', trigger: 'change' }
      ],
      source: [
        { required: true, message: '请选择客户来源', trigger: 'change' }
      ],
      occupation: [
        { required: true, message: '请输入职业', trigger: 'blur' }
      ],
      monthlyIncome: [
        { required: true, message: '请输入月收入', trigger: 'blur' }
      ]
    }

    // 方法定义
    const goBack = () => {
      router.back()
    }

    const handleSubmit = async () => {
      if (!formRef.value) return
      
      try {
        await formRef.value.validate()
        // TODO: 实现提交逻辑
        ElMessage.success(customerId ? '更新成功' : '添加成功')
        router.push('/customer/list')
      } catch (error) {
        console.error('表单验证失败:', error)
      }
    }

    onMounted(() => {
      if (customerId) {
        // TODO: 获取客户信息
      }
    })

    return {
      customerId,
      formRef,
      form,
      rules,
      goBack,
      handleSubmit
    }
  }
}
</script>

<style scoped>
.customer-form {
  padding: 20px;
}

.page-header-content {
  font-size: 20px;
  font-weight: bold;
}

.form-content {
  margin-top: 20px;
}

.form-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
  color: #409EFF;
}

.form-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

:deep(.el-form-item__label) {
  font-weight: bold;
}

:deep(.el-card__body) {
  padding: 20px;
}
</style> 